<template>
  <div class="container">
    <div class="top">
      <div><img src="@/assets/images/logo.png" alt="" class="img" /></div>

      <div class="nav" @click="drawer = true">
        <img src="@/assets/images/menu.png" alt="" />
      </div>


      <el-drawer v-model="drawer" title="I am the title" size="35vw" :with-header="false" :direction="'ttb'">
        <div class="top">
          <div class="a">
            <div><img src="@/assets/images/logo.png" alt="" class="img" /></div>
            <div class="nav" @click="drawer = false">
              <img src="@/assets/images/close.png" alt="" />
            </div>
          </div>
        </div>
        <div class="menu">
          <div @click="navigate('/indexiphone')">首页</div>
          <div @click="navigate('/etciphone')">ETC</div>
          <div @click="navigate('/streamingiphone')">流媒体后视镜</div>
        </div>
      </el-drawer>

    </div>
    <div class="content">
      <div class="headline">
        <img src="@/assets/images/headline.png" alt="" />
      </div>
      <div class="introduce">
        <!-- 公司简介 -->
        <div class="synopsisitem">
          <img src="@/assets/images/synopsis.png" alt="" />
          <div class="citem">
            <div class="companyIntroduction">
              车易行科技发展有限公司，我们在汽车配件、生活用品和ETC服务领域深耕5年+，协助解答汽车问题400w+，致力于为企业和用户提供优质的车主体验与服务。
            </div>
            <div class="synopsistop">
              <div class="zitem">
                <div class="bigheadline">
                  <img src="@/assets/images/dot.png" alt="" />
                  <div class="title">信任环境</div>
                </div>
                <div class="zcontent">
                  <div class="text">车易行永远把客户利誉置于公司利益之上;</div>
                  <img src="@/assets/images/support.png" alt="" />
                </div>
              </div>
              <div class="zitem">
                <div class="bigheadline">
                  <img src="@/assets/images/dot.png" alt="" />
                  <div class="title">长期客户</div>
                </div>
                <div class="zcontent">
                  <div class="text">
                    <div>服务ETC激活车主100w+</div>
                    <div>推荐品质汽车好物10w+;</div>
                  </div>
                  <img src="@/assets/images/client.png" alt="" />
                </div>
              </div>
            </div>
            <div class="synopsisbottom">
              <div class="zitem">
                <div class="bigheadline">
                  <img src="@/assets/images/dot.png" alt="" />
                  <div class="title">公司优势</div>
                </div>
                <div class="zcontent">
                  <div class="text">
                    拥有全国ETC线上综合服务平台，用“互联网+”打造了全新的服务模式，配套强大的ERP系统和客服中心;
                  </div>
                  <img src="@/assets/images/cooperate.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 公司产品 -->
        <div class="synopsisitem">
          <img src="@/assets/images/products.png" alt="" />
          <div class="productsflex">
            <div class="productsitem">
              <div>
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>ETC</span>
                </div>
                <div class="blips">
                  <span>一站式线上申办</span>
                  <span class="shu">|</span>
                  <span>线上自助激活</span>
                  <span class="shu">|</span>
                  <span>全国畅行95折</span>
                </div>
                <div class="more">了解更多 ></div>
              </div>
              <div class="icon">
                <img class="products_etc" src="@/assets/images/products_etc.png" alt="" />
              </div>
            </div>

            <div class="productsitem">
              <div>
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>广汽原厂流媒体</span>
                </div>
                <div class="blips">
                  <span>原车替换安装</span>
                  <span class="shu">|</span>
                  <span>专车专用设计</span>
                  <span class="shu">|</span>
                  <span>前后切换</span>
                </div>
                <div class="more">了解更多 ></div>
              </div>
              <div class="icon">
                <img class="products_streaming" src="@/assets/images/products_streaming.png" alt="" />
              </div>
            </div>
            <div class="productsitem">
              <div class="blips">
                <div class="title">
                  <img src="@/assets/images/dot.png" alt="" />
                  <span>JVC车载音响</span>
                </div>
                <div>
                  <span>一线品牌方案</span>
                  <span class="shu">|</span>
                  <span>专业汽车喇叭</span>
                  <span class="shu">|</span>
                  <span>为无损升级而生</span>
                </div>
              </div>
              <div class="icon">
                <img class="products_jvc" src="@/assets/images/products_jvc.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 公司业务 -->
        <div class="businessitem">
          <img src="@/assets/images/business.png" alt="" />
          <div class="thinking">
            <img src="@/assets/images/thinking.png" alt="" />
          </div>
        </div>
        <!-- 职业前景 -->
        <div class="careerprospectsitem">
          <img src="@/assets/images/careerprospects.png" alt="" />
          <div class="careerprospects">
            <div class="one">车易行用人唯才，<span>精英云集</span></div>
            <div class="careerprospectstext">
              <div>我们深信，通力合作、团体精神和正直，</div>
              <div>会为我们的员工营造良好的环境，</div>
              <div>从而为我们的客户创造最佳的业绩。</div>
            </div>
            <div class="careerprospectstext">
              <div>在推动思想和能力，甚至全球进步的道路上，</div>
              <div class="color">车易行都与您同在!</div>
            </div>
          </div>
        </div>
        <div class="record">
          <div class="adress">
            <div class="pb">
              <span class="tltle">办公地点</span><span class="copy">广州市白云区元下底路1号17栋101房</span>
            </div>
            <div class="img">
              <div><img src="http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/qrcore.jpg" alt="" /></div>
              <div class="gzh">微信公众号</div>
            </div>
            <div class="center">
              Copyright © 2024 广州车易行科技发展有限公司 <span @click="goToBeianSite">粤ICP备20024691号-14</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from "vue-router";
const drawer = ref(false)
const router = useRouter();
const navigate = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
const goToBeianSite = () => {
  window.open('https://beian.miit.gov.cn/', '_blank');
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
}

.top {
  height: 179px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 73px;
  position: fixed;
  width: 100vw;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 999;

  .img {
    height: 62px;
  }

  .nav {
    display: flex;

    img {
      height: 62px;
    }
  }

  .a {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px 0
  }

  .menu {
    padding: 0 73px;
    padding-top: 179px;

    div {
      font-size: 50px;
      border-bottom: 1px solid #e5e5e5;
      padding: 40px 0;
    }

  }

}

.content {
  padding: 0 73px;
  padding-top: 179px;
  background-clip: padding-box;
  box-sizing: border-box;
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/background.png) no-repeat;
  background-size: cover;
  min-height: 100vh;
  height: auto;

  .headline img {
    width: 941px;
    margin-top: 114px;
  }

  .introduce {
    margin-top: 829px;

    .synopsisitem {
      box-sizing: border-box;
      padding: 80px;
      width: 1774px;
      height: 1408px;
      background-color: #fff;
      margin-bottom: 480px;
      border-radius: 29px;

      img {
        width: 1000px;
      }

      .citem {
        padding: 26px 0;

        .companyIntroduction {
          padding: 63px 0;
          font-size: 58px;
          text-indent: 2em;
        }

        .synopsistop {
          display: flex;
          justify-content: space-between;

          .zitem {
            box-sizing: border-box;
            padding: 58px 27px;
            padding-right: 36px;
            background-color: #eff3ff;
            width: 791px;
            height: 317px;

            .bigheadline {
              display: flex;
              align-items: center;

              img {
                width: 53px;
                margin-right: 15px;
              }

              .title {
                font-size: 58px;
                color: #126ef9;
                font-weight: bold;
              }
            }
          }

          .zcontent {
            font-size: 50px;
            display: flex;
            justify-content: space-between;

            .text {
              font-size: 50px;
              color: #000;
              margin-right: 42px;
            }

            img {
              width: 119px;
            }
          }
        }

        .synopsisbottom {
          margin-top: 42px;

          .zitem {
            box-sizing: border-box;
            padding: 58px 27px;
            padding-right: 36px;
            background-color: #eff3ff;
            width: 1613px;
            height: 317px;

            .bigheadline {
              display: flex;
              align-items: center;

              img {
                width: 53px;
                margin-right: 15px;
              }

              .title {
                font-size: 58px;
                color: #126ef9;
                font-weight: bold;
              }
            }

            .zcontent {
              font-size: 50px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .text {
                font-size: 50px;
                color: #000;
                margin-right: 42px;
              }

              img {
                width: 163px;
                margin-right: 150px;
              }
            }
          }
        }
      }

      .productsflex {
        display: flex;
        flex-direction: column;

        .productsitem {
          box-sizing: border-box;
          width: 1613px;
          height: 342px;
          background-color: #eff3ff;
          border-radius: 16px;
          margin-bottom: 63px;
          padding: 52px 27px;
          position: relative;
          border-radius: 29px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .icon {
            margin-right: 70px;

            .products_etc {
              width: 284px;
              height: 271px;
            }

            .products_streaming {
              width: 317px;
              height: 221px;
            }

            .products_jvc {
              width: 388px;
              height: 324px;
            }
          }

          .title {
            display: flex;
            align-items: center;
            font-size: 69px;
            color: #126ef9;
            font-weight: bold;

            img {
              height: 31px;
              width: 53px;
              margin-right: 21px;
            }
          }

          .blips {
            font-size: 50px;
            color: #000;

            .shu {
              margin: 0 30px;
            }
          }

          .more {
            font-size: 50px;
            color: #126ef9;
          }
        }
      }
    }

    .businessitem {
      box-sizing: border-box;
      padding: 80px;
      height: 1082px;
      background-color: #fff;
      margin-bottom: 480px;
      border-radius: 29px;

      img {
        width: 1000px;
      }

      .thinking {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;

        img {
          width: 1317px;
          height: 622px;
        }
      }
    }

    .careerprospectsitem {
      box-sizing: border-box;
      padding: 80px;
      height: 992px;
      background-color: #fff;
      margin-bottom: 480px;
      border-radius: 29px;

      img {
        width: 1000px;
      }

      .thinking {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;

        img {
          width: 1317px;
          height: 622px;
        }
      }

      .careerprospects {
        margin: 0 auto;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        color: #000;

        span {
          color: #126ef9;
        }

        .one {
          font-size: 88px;
          margin-bottom: 77px;
          text-align: center;
          font-weight: bold;
        }

        .careerprospectstext {
          font-size: 50px;
          margin-bottom: 88px;
          text-align: center;

          .color {
            color: #126ef9;
          }
        }
      }
    }
  }
}

.record {
  .adress {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .pb {
      padding-bottom: 20px
    }

    .tltle {
      color: #000000;
      font-size: 30px;
      margin-right: 20px;
    }

    .copy {
      color: #999;
      font-size: 30px;
    }
  }

  .img {
    img {
      width: 300px;
      height: 300px;
    }

    .gzh {
      text-align: center;
      font-size: 30px;
    }
  }

  .center {
    font-size: 30px;
    padding: 50px 0;
  }
}
</style>